<template>
	<view class="content">
		<view>
<!--			<u-navbar height='100' :is-back="false">-->
				<view style="width: 100vw;display: flex;flex-direction: row;flex-wrap: nowrap;background-color: #f64949">
					<view class="nav-address" @click="intoChooseShop">
						<image class="address-icon" src="../../static/chooseShop/dingwei.png"></image>
						<view style="font-size:25rpx;color:white;max-width:68%;margin-left: 3px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">送至:{{shopName}}</view>
<!--						<image class="arrow" src="../../static/chooseShop/jiantou-xia.png"></image>-->
					</view>
					<view class="wrap-search">
						<view class="search" @click="intoSearch">
						  <view class="search-btn">
						    <view style="display: flex;align-items: center;">
								<icon class="search-icon" type="search" size="12"/>
								<text>搜索商品名称</text>
							</view>
						  </view>
						</view>
						<!-- <uni-search-bar placeholder="搜索商品名称" bgColor="#fbfbfb" @confirm="search"></uni-search-bar> -->
						<!-- <view style="width: calc(100vw - 20px); height: 45px;border-radius: 10px;border: 1px solid #EEEEEE;margin-left: 10px;"></view> -->
					</view>
				</view>
<!--			</u-navbar>-->
		</view>

		<!-- 轮播图 -->
		<view class="wrap" style="margin-top: 10px" v-if="imgList.length>0">
			<u-swiper :list="imgList" :effect3d="true" height="300" @click="toJump"></u-swiper>
		</view>

		<!-- 分类 -->
		<view class="function_area">
			<view v-for="(pics,index) in picList" :key="index" style="width: 96rpx;text-align: center;margin: 20rpx;" @click="toGoodList(pics.id)">
				<image :src="pics.img_id" style="width: 96rpx;height: 96rpx;"></image>
				<view style="font-size: 22rpx;">{{pics.name}}</view>
			</view>
		</view>

		<!-- 广告区 -->
		<view class="column" v-if="poster.length > 0">
			<view v-for="(item,index) in poster" :key="index" >
				<view class="column_left" v-if="index == 0">
					<image :src="item.img_url" mode="aspectFill" class="left_img" @click="toJumpDetail(item.link_url)"></image>
				</view>
				<view class="colum_right" v-if="index > 0 && index < 3">
					<image :src="item.img_url" class="right_img" v-if="index == 1" mode="aspectFill" @click="toJumpDetail(item.link_url)"></image>
					<image :src="item.img_url"  v-if="index == 2" style="margin-top: 12upx" class="right_img" mode="aspectFill"  @click="toJumpDetail(item.link_url)"></image>
				</view>
			</view>
		</view>

		<!-- 专栏商品 -->
		<view style="margin-top:20px" v-if="sectionGoods.length > 0">
			<view class="spec-background" v-for="(section,index) in sectionGoods">
				<view style="display: flex;justify-content:space-between;padding: 12px 19px 0;color: white;" v-if="section.advert_img_id != 0">
					<image :src="section.advert_img_url" @click="toGoodList(section.id)" style="width: 100%;height: 120rpx;border-radius: 20rpx" mode="aspectFill" />
				</view>
				<view class="page-section-spacing" v-if="section.goods_list">
					<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
						<!-- 遍历 -->
						<view class="scroll-view-item_H" v-for="(child,index2) in section.goods_list" :key="index2">
							<view>
								<image style="width:140rpx;height: 140rpx;" mode="aspectFit" :src="child.thumb_img_url" @click.stop="toGoodsDetail(child.id)" />
							</view>
							<view class="no-wrap" style="white-space: normal;font-size: 13px;" @click.stop="toGoodsDetail(child.id)">{{child.name}}</view>
							<view style="display: flex;justify-content: space-between;padding: 20rpx;font-size: 16px;">
								<view style="color: red;">￥{{child.s_price}}</view>
								<image @click.stop="getGoodsDetails(child.id)" style="width:25px;height: 25px;" src="http://file.rzkeji.com/web/pygxs2020/images/icon/icon-btn-cart.png"></image>
							</view>
						</view>

					</scroll-view>
				</view>
			</view>
		</view>
		
		<!--推荐-->
		<view class="recommend-list">
		  <view class="recommend-list-title">
		    为您推荐
		  </view>
		  <view class="null" v-if="recommendData.length==0">
		    暂无热门推荐商品~~
		  </view>
		  <view class="recommend-item" v-for="(item,index) in recommendData" :key="index"  @click="toGoodsDetail(item.id)">
		    <view class="item-img">
		      <image :src="item.thumb_Url" mode="widthFix"/>
		    </view>
		    <view class="item-right">
		      <view class="item-des">{{item.name}}</view>
		      <view class="item-info">{{item.desc}}</view>
		      <view class="price">
		        <span>￥{{item.s_price}}</span>
		        <image @click.stop="getGoodsDetails(item.id)" class="img" src="http://file.rzkeji.com/web/pygxs2020/images/icon/icon-btn-cart.png" />
		        <view class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</view>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="bottom" v-if="total==recommendData.length && recommendData.length > 0">
			已到底，没有更多了~~
		</view>

		<!-- 弹出层 -->
		<div class="mask" v-if="showModal" @click="hideCart"></div>
		<div class="modalDlg" v-if="showModal">
			<div class="modalDlg_top">
				<img :src="goodsDetail.thumb_url" alt="">
				<div class="modalDlg_top_right">
					<div class="modalDlg_top_right_name">
						<!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
						<span>{{goodsDetail.name}}</span>
					</div>
					<div class="cart_price">
						<span v-if="credit">{{goodsDetail.exchange_integral}}积分</span>
						<span v-else>￥{{goodsDetail.s_price}}</span>
						<span>库存：{{goodsDetail.stock}}</span>
					</div>
				</div>
			</div>
			<div class="modalDlo_center">
				<div class="modalDlo_center_tit" v-if="colorAll.length!=0">规格</div>
				<div class="modalDlo_center_classify">
					<div
							v-for="(item,index) of colorAll"
							:key="index" @click="select_classify(index)"
							:class="{selectClassify:index==colorIndex}"
					>
						{{item}}
					</div>
				</div>
			</div>
			<div class="modalDlo_bottom">
				<count @numberChange="numberChange" :stock="goodsDetail.stock">
					<div>购买数量</div>
				</count>
			</div>
			<div class="join_cart" v-if="!buyNow" @click="addCart">加入购物车</div>
			<div class="join_cart" v-else @click="buying">立即购买</div>
		</div>
		<!-- 弹出层结束 -->
		
	</view>
</template>
<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import count from '@/components/count'
	export default {
		data() {
			return {
				imgList:  [],//轮播图
				buttonList: '',//功能区按钮
				poster:[],//广告图列表
				sectionGoods:[],//专栏商品
				geographic: 'Hello',
				scrollTop: 0,
				shopName:"请先选择地址",
				old: {
					scrollTop: 0
				},
				picList: [],
				childDiscounts:[
					{
						pic:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600092035189&di=d66dab025419f9afcb13bd7ce562102b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190122%2Fed6f3804c54740a5926b9e8d99f74fec.jpeg',
						title:"fasdfasdf天然维生素营养发射点发射点发射点发射点水200mlfasdfa",
						price:'19.9'
					},
					{
						pic:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600092035189&di=d66dab025419f9afcb13bd7ce562102b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190122%2Fed6f3804c54740a5926b9e8d99f74fec.jpeg',
						title:"天然维生素营养水200ml",
						price:'19.9'
					},
					{
						pic:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600092035189&di=d66dab025419f9afcb13bd7ce562102b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190122%2Fed6f3804c54740a5926b9e8d99f74fec.jpeg',
						title:"天然维",
						price:'19.9'
					},
					{
						pic:'../../static/mipmap-xhdpi/营养保健.png',
						title:"天然维生素营养水200ml",
						price:'19.9'
					}
				],
				recommendData: [],
				goodsDetail: '',
				classifyIndex: -1,
				classifyId: '',
				id: '',
				num: '',
				showModal: '',
				page:1,
				total:0,

				goods_spu_info: [],
				size: [],
				selectSizes:[],
				sizeAll: [],
				color:[],
				selectColors:[],
				colorAll: [],
				sizeIndex: -1,
				colorIndex: -1,
			}
		},
		components: {
			uniNavBar,
			uniSearchBar,
			count
		},
		onShow(){

		},
		onShareAppMessage() {
			return {
				title: '百越网购商城',
				desc: this.goodsDetail.name,
				path:'/pages/index/index'
			}
		},
		mounted(){
			this.getLocation();
			this.getBanner();
			this.getIndexButtonList();
			this.getAdvertImg();
			this.getSectionGoods();
			this.getRecommendGoodsList();
		},
		methods: {
			toJump(index){
				wx.navigateTo({url: this.imgList[index].link_url});
			},
			toJumpDetail(url){
				wx.navigateTo({url: url});
			},
			//进入选择商店页面
			intoChooseShop() {
				// uni.navigateTo({
				// 	url: '../chooseShop/chooseShop'
				// })
				let _this = this
				uni.chooseLocation({
					success(res){
						console.log(res)
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						uni.setStorageSync('shop_dist',_this.latitude + "," + _this.longitude);
						uni.setStorageSync('user_address',res.address);
						_this.shopName = res.name
					},
					fail(res){

					},
					complete(){

					}
				});
			},

			getLocation(){
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						console.log(res);
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						_this.getLocationInfo();
						uni.setStorageSync('shop_dist',_this.latitude + "," + _this.longitude);
					},
					fail (res){
						uni.showToast({
							title: "请选择送达地址",
							duration: 1500
						})
					},
					complete(){

					}
				})
			},
			async getLocationInfo(){
				let res=await this.$api.getLocationInfos({
					location: this.latitude + "," + this.longitude,
					key: "THNBZ-EIYCQ-CZB5B-G5SZG-DQFWV-4GBYY"
				});
				if(res.data.status== 0){
					this.shopName = res.data.result.formatted_addresses.recommend;
					uni.setStorageSync('user_address',res.data.result.address);
				} else{
					uni.showToast({
						title: res.data.message,
						duration: 1500
					})
				}
			},

			//获取首页广告
			async getAdvertImg(){
				let res = await this.$api.getAdvertImg();
				if (res.data.level == 'success'){
					this.poster = res.data.data;
				}
			},

			//获取首页广告
			async getSectionGoods(){
				let res = await this.$api.getSectionGoodsList();
				if (res.data.level == 'success'){
					this.sectionGoods = res.data.data;
				}
			},

			//进入搜索页面
			intoSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			
			//获取轮播图
			async getBanner(){
			  let res=await this.$api.getBannerList();
			  if(res.data.level=='success'){
			  	let bannerList = res.data.data;
			  	if(bannerList.length > 0 ){
					var i;
			  		for (i in bannerList){
			  			let result = {
			  				"image":bannerList[i]["img_url"],
							"title":bannerList[i]["title"],
							"link_url":bannerList[i]["link_url"],
						}
			  			this.imgList.push(result)
					}
				}
			    wx.stopPullDownRefresh()
			  }
			},
			
			//获取首页功能区按钮
			async getIndexButtonList(){
			  let res=await this.$api.getIndexButtonList();
			  if(res.data.level=='success'){
			    this.picList=res.data.data;
			    wx.stopPullDownRefresh()
			  }
			},
			
			//获取推荐商品
			async getRecommendGoodsList(){
			  let res=await this.$api.getRecommendGoodsList({
				  page:this.page,
				  limit:10,
				  user_token: uni.getStorageSync('userToken')
			  });
				if(res.data.level=='success'){
					if (this.page == 1){
						this.recommendData = res.data.data;
					} else {
						if (res.data.data.length==0){
							this.page--;
						}else {
							this.recommendData = this.recommendData.concat(res.data.data)
						}
					}
					this.total = res.data.page_info.total;
				}
			},
			
			//获取商品详情
			async getGoodsDetails(id){
			  if (id != this.id){
				  this.classifyId = '';
				  this.colorIndex = -1;
			  }
			  let res = await this.$api.getGoodsDetails( {
				  goods_id: id,
			  })
			  if(res.data.level=='success'){
			    this.goodsDetail = res.data.data;
			    this.id = id;
			    this.num=1;
			    this.showModal = true;
				  this.goods_spu_info = res.data.data.goods_spu_info;
				  this.select();
			    wx.hideTabBar();
			  }
			},
			select(){
				this.colorAll = [];
				this.size = [];
				this.color = [];
				this.colorIndex = -1;
				this.classifyId = '';
				this.goods_spu_info.forEach(item => {
					if (this.colorAll.indexOf(item.color_spu_name)==-1){
						this.colorAll.push(item.color_spu_name)
					}
				})
			},
			selectColor(value){
				let color = [];
				// let stock = [];
				this.goods_spu_info.forEach(item => {
					color.push(item.color_spu_name);
				})
				this.color.push(color);
			},
			select_classify(index) {//选择规格
				// this.classifyIndex = index
				// this.classifyId = item.id
				if (this.colorIndex == index){
					this.colorIndex = -1;
					this.classifyId = '';
					this.getGoodsDetails(this.id);
				} else {
					this.colorIndex = index;
				}

				let str = [];
				if (this.colorIndex!=-1){
					this.selectClassifys()
				}
			},
			selectClassifys(){
				this.goods_spu_info.forEach(item => {
					if (item.color_spu_name==this.colorAll[this.colorIndex]){
						this.$set(this.goodsDetail, 'stock', item.stock)
						this.$set(this.goodsDetail, 's_price', item.price);
						this.$set(this.goodsDetail,'thumb_url',item.img_url);
						this.classifyId = item.id;
					}
				})
			},
			numberChange(num){
				this.num=num
			},
			
			//添加到购物车
			async addCart(){//添加到购物车
				const _this=this
				if(this.num<=0){
					this.$currency.showToast('购买数量不能为0');
					return
				}else if(this.classifyId==''){
					this.$currency.showToast('先选择规格吧');
					return
				}
				var userToken=uni.getStorageSync('userToken')
				let res=await this.$request.postData('/goods/addShopCart',{
					goods_id:this.id,
					num:this.num,
					user_token:userToken,
					goods_spu_id:this.classifyId
				})
				wx.showLoading()
				if(res.data.level=='success'){
					_this.$currency.showToast('成功加入购物车','success',1500);
					_this.showModal=false;
					wx.showTabBar();
					_this.classifyId = '';
					_this.classifyIndex = -1;
					let num = _this.page;
					for (let i = 0; i< num ; i++){
						_this.page = i+1;
						_this.getRecommendGoodsList()
					}
					wx.hideLoading();
				}else{
					wx.hideLoading({success:function(){
							_this.$currency.showToast(res.data.message,'none',1500)
						}});

				}
			},
			
			hideCart(){
			  this.showModal = false;
			  this.goodsDetail = '';
			  wx.showTabBar();
			},
			
			//跳转商品列表页面
			toGoodList(id){
				// uni.setStorageSync("section_id",id)
				uni.navigateTo({
					url: '/pages/classifyTwo/classifyTwo?section_id='+id
				})
			},
			
			//跳转商品详情
			toGoodsDetail(id){
			  wx.navigateTo({
				  url:'/pages/goodsDetail/goodsDetail?id='+id
			  })
			},
			
			/* upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			}, */
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			clickLeft() {
				console.log("点击左边")
			},
			goDetail() {
				console.log("点击小图标")
			}
		}
	}
</script>

<style scoped>
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	.no-wrap{
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 1;
	  overflow: hidden;
	}
	.content {
		background-color: #f8f8f8;
	}
	
	.page-section-spacing {
		margin-top: 10rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 260rpx;
		text-align: center;
		/* border: 1px solid #EEEEEE; */
		border-radius: 10rpx;
		margin: 10px;
		background-color: #FFFFFF;
	}
	.scroll-view-item_H2 {
		display: inline-block;
		width: 320rpx;
		text-align: center;
		border: 1px solid #dddd;
		border-radius: 10rpx;
		margin: 10px;
		background-color: #FFFFFF;
	}
	
	.spec-background{
		width: 100%;
		height: 250px;
		/*background-image: url(../../static/home/test.png);*/
		background-color: white;
		background-size: 100vw auto;
		background-repeat: no-repeat;
	}
	
</style>

<style scoped lang="scss">
	@import "../../common/css/mixin";

	.nav-address{
		width: 50%;
		display: flex;
		align-items: center;
		.address-icon{
			width: 17px;
			height: 19px;
			margin: 0 10px;
		}
		.arrow{
			width: 12px;
			height: 7px;
			margin-left: 8px;
		}
	}
	
	.wrap-search{
		padding-top: 10px;
		height: 50px;
		width: 50%;
	}
	
	.search{
	  width: 50%;
	  height: 35px;
	  padding: 5px 10px;
	
	  .search-btn{
	    width: 100%;
	    position: relative;
	    padding: 0 30px;
	    height: 35px;
	    line-height: 35px;
	    border-radius: 50rpx;
	    border: 1rpx solid #eeeeee;
	    font-size: 12px;
	    color: #858585;
	    /* background: rgba(255,255,255,0.8); */
		background-color: #fbfbfb;
		display: flex;
		align-items: center;
		justify-content: center;
	    .search-icon{
	      position: relative;
	      top: 15rpx;
	      /* left: 25rpx; */
		  margin-right: 8px;
	    }
	  }
	}
	
	.function_area{
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		padding: 24rpx;
	}
	
	.recommend-list{
	  @include flexWrap(flex-start,flex-start);
	  flex-direction: row;
	  justify-content: space-between;
	  width: calc(100vw - 40rpx);
	  /*margin-top: 10rpx;*/
	  background-color: #F9F9F9;
	  padding: 20rpx;
	  .recommend-list-title{
	    width: 100%;
		font-size: 18px;
		font-weight: bold;
	    padding: 10px 0 20px;
	  }
	  .null{
	    width: 100%;
	    padding: 60rpx 0;
	    text-align: center;
	    font-size: 34rpx;
	    color: #959595;
	    height: 100rpx;
	    line-height: 100rpx;
	  }
	  .recommend-item{
	    width: calc((100% - 100rpx)/2);
	    padding: 20rpx;
	    margin-bottom: 10px;
		border-radius: 5px;
	    overflow: hidden;
	    background: #ffffff;
	    @include flex();
	    flex-direction: column;
	    .item-img{
	      width: calc((100vw - 120rpx)/2);
	      height: calc((100vw - 120rpx)/2);
	      border-radius: 16rpx;
	      overflow: hidden;
		  image {
			  width: calc((100vw - 120rpx)/2);
		  }
	    }
	    .item-right{
	      @include flex();
	      flex-direction: column;
	      height: 25vw;
	      width: 100%;
	      .item-des{
	        height: 6vw;
	        line-height: 6vw;
	        width: 100%;
	        font-size: 32rpx;
	        @include ellipsis(1);
	      }
	      .item-info{
	        height: 6vw;
	        line-height: 6vw;
	        width: 100%;
	        font-size: 24rpx;
	        color: #aaaaaa;
	        @include ellipsis(1);
	
	      }
	      .price{
	        font-size: 34rpx;
	        @include flex(flex-start,flex-end);
	        flex-direction: row;
	        height: 8vw;
	        width: 100%;
	        color: #F55D0E;
	        font-weight: bold;
	        position: relative;
	        .original{
	          font-size: 22rpx;
	          color: #707070;
	          text-decoration: line-through;
	          padding-left: 20rpx;
	        }
	        .img{
	          margin-left: auto;
	          width: 22px;
	          height: 22px;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	      .sale_count{
	        position: relative;
	        font-size: 24rpx;
	        color: #b2b2b2;
	        width: 100%;
	        height: 40rpx;
	        line-height: 40rpx;
	        @include flex(flex-start);
	        .img{
	          margin-left: auto;
	          width: 40rpx;
	          height: 40rpx;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	    }
	
	  }
	}
	
	/* 弹出框 */
	.mask{
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: #000;
	  z-index: 9000;
	  opacity: 0.7;
	}
	.modalDlg{
	  width: 100%;
	  height:45%;
	  position: fixed;
	  bottom:0;
	  left: 0;
	  z-index: 9999;
	  background-color: #ffffff;
	  color: #000000;
	  padding-bottom: 40px;
	}
	
	.modalDlg_top{
	  padding:5px 25px 5px 10px;
	  /*padding-right:25px;*/
	  display: flex;
	  align-items: center;
	  /*border-bottom: 1px solid #eee;*/
	  height: 30%;
	
	}
	.modalDlg_top>img{
	  width:80px;
	  height: 80px;
	}
	.modalDlg_top_right{
	  margin-left:20px;
	  width:calc(100% - 100px);
	}
	.modalDlg_top_right_name{
	  display: flex;
	  align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;//向显示多少行就给多大值
		-webkit-box-orient: vertical;
	  color: #787777;
		font-size: 26rpx;
	  span{
	    @include ellipsis(3)
	  }
	}
	.modalDlg_top_right_name_tag{
	  color:purple;
	  display: inline-block;
	  width:50px;
	  text-align: center;
	  border:1px solid purple;
	  font-size: 10px;
	  border-radius: 5px;
	  margin-right:5px;
	}
	.modalDlg_top_right_name_tag+span{
	  width:200px;
	  display: inline-block;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.modalDlo_bottom{
	  margin-left:10px;
	}
	.cart_price{
	  margin-top:15px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center
	}
	.cart_price>span:nth-child(1){
	  color:red;
	}
	.modalDlo_center{
	  max-height: 50%;
	  overflow-x: hidden;
	  overflow-y: scroll;
	}
	.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
	  width:100%;
	  /*max-height: 45%;*/
	}
	.modalDlo_center_classify{
	  display:flex;
	  align-items: center;
	  flex-wrap:wrap;
	  margin:10px;
	  /*padding-bottom: 50px;*/
	}
	.modalDlo_center_classify>div{
	  border:1px solid #eee;
	  padding:2.5px 5px;
	  border-radius: 5px;
	  margin-right:5px;
		margin-top: 5px;
		font-size: 26rpx;
		color: #787777;
	  text-align: center;
	}
	.modalDlo_center_tit{
	  padding-left:10px;
	}
	.join_cart{
	  width:100%;
	  background: rgb(196, 75, 75);
	  color:#fff;
	  font-size: 20px;
	  text-align: center;
	  line-height: 40px;
	  position: absolute;
	  bottom:0;
	}
	button::after {
	  border: none;
	}
	button {
	  background-color: #fff;
	  line-height: 16px;
	  font-size: 10px;
	  border-radius:0;
	}
	/* 规格 */
	.selectClassify{
	  border:red 1px solid !important;
	  color:red;
	}
	
	.back{
	  background: #ffffff;
	}
	
	.bottom{
	  padding: 30rpx;
	  text-align: center;
	  color: #999999;
	  background: #ffffff;
	}

	/*广告区域*/
	.column{
		height: 400upx;
		width: 94%;
		overflow: hidden;
		margin: 0 3%;
		margin-top: 15upx;
		background-color: white;
		border-radius: 20rpx;
	}
	.column_left{
		height: 100%;
		width: 40%;
		float: left;
		border: 1px solid #f3f2f2;
		.left_img{
			width: 100%;
			height: 400rpx;
			display: block;
		}
	}
	.colum_right{
		float: right;
		width: 58%;
		border: 1px solid #f3f2f2;
		.right_img{
			width: 100%;
			height: 196upx;
			display: block;
		}
	}
</style>
